import React, { useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { setScreenStream } from '@/store/reducers/stream';
import Icon from '@/components/Icon';
import { useTranslation } from 'react-i18next';

interface FooterProps {
	endScreenShare?: () => void;
}
const Footer = (props: FooterProps) => {
	const { t } = useTranslation();
	const { endScreenShare } = props;
	const { screenStreams } = useSelector((state: any) => state);
	const [activeIndex, setActiveIndex] = useState(0);
	const dispatch = useDispatch();
	const [tools, setTools] = useState([
		{
			id: 1,
			desc: '',
			mode: 'pen',
			icon: 'icon-widget-qianbi'
		},
		{
			id: 2,
			desc: '',
			mode: 'remove',
			icon: 'icon-widget-xiangpi'
		},
		{
			id: 3,
			desc: '',
			mode: 'line',
			icon: 'icon-widget-zhixian'
		},
		{
			id: 4,
			desc: '',
			mode: 'square',
			icon: 'icon-widget-fang'
		},
		{
			id: 5,
			desc: '',
			mode: 'circle',
			icon: 'icon-widget-yuan'
		},
		{
			id: 6,
			desc: '',
			mode: 'text',
			icon: 'icon-widget-wenzi'
		}
	]);

	const toolClick = (item: any) => {
		dispatch(setScreenStream({ tool: item }));
	};

	return (
		<ul className="screen-share-footer">
			{tools.map((item, index) => (
				<li
					className={activeIndex === index ? 'active' : ''}
					key={item.id}
					onClick={() => {
						toolClick(item);
						setActiveIndex(index);
					}}
				>
					<Icon classname={item.icon}></Icon>
				</li>
			))}
			<li
				className="end-screen-btn"
				onClick={() => {
					dispatch(setScreenStream({ tool: '' }));
					endScreenShare && endScreenShare();
				}}
			>
				{t('end-mark')}
			</li>
		</ul>
	);
};

export default Footer;
